<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" style="padding: 0" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">入职办理</block>
		</cu-custom>
		<view class="u-demo-block__content">
			<u-divider text="基本信息" style="margin-top: -10px;"></u-divider>
			<u--form labelPosition="left" style="margin-top: -35px;" :model="formModel" :rules="rules" ref="formRef">
				<u-form-item label="姓名" prop="name" borderBottom>
					<u--input v-model="formModel.name" border="none" placeholder="请输入姓名" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="sex" borderBottom @click="showSex = true; hideKeyboard()">
					<u--input v-model="formModel.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
						inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="最高学历" prop="education" borderBottom labelWidth="80"
					@click="showEdu = true; hideKeyboard()">
					<u--input v-model="formModel.education" disabled disabledColor="#ffffff" placeholder="请选择学历"
						border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="入职时间" prop="entryDate" borderBottom labelWidth="80"
					@click="showEntryDate = true; hideKeyboard()">
					<u--input v-model="formModel.entryDate" disabled disabledColor="#ffffff" placeholder="请选择入职时间"
						border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="身份证" prop="idCard" borderBottom labelWidth="80">
					<u--input v-model="formModel.idCard" border="none" placeholder="请输入身份证号"
						@blur="fillBirthdayFromIDCard" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="生日" prop="birthday" borderBottom>

					<u--input v-model="formModel.birthday" disabled disabledColor="#ffffff" placeholder="输入身份证后点击自动填写"
						border="none" inputAlign="right"></u--input>
				</u-form-item>
				<u-divider text="联系方式"></u-divider>
				<u-form-item label="移动电话" prop="mobile" style="margin-top: -25px;" borderBottom labelWidth="80">
					<u--input v-model="formModel.mobile" border="none" placeholder="请输入移动电话"
						inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="紧急联系人" prop="emergencyContact" borderBottom labelWidth="80">
					<u--input v-model="formModel.emergencyContact" border="none" placeholder="请输入紧急联系人姓名"
						inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="紧急联系电话" prop="emergencyPhone" borderBottom labelWidth="100">
					<u--input v-model="formModel.emergencyPhone" border="none" placeholder="请输入紧急联系电话"
						inputAlign="right"></u--input>
				</u-form-item>

				<u-form-item label="邮箱" prop="email" borderBottom>
					<u--input v-model="formModel.email" border="none" placeholder="请输入邮箱" inputAlign="right"></u--input>
				</u-form-item>
				<u-divider text="薪资相关(杭州银行)"></u-divider>
				<u-form-item label="工资卡号" prop="salaryCard" style="margin-top: -25px;" borderBottom labelWidth="80">
					<u--input v-model="formModel.salaryCard" border="none" placeholder="请输入工资卡号"
						inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="开户行名称" prop="bankName" borderBottom labelWidth="50">
					<u--textarea v-model="formModel.bankName" placeholder="请输入开户行名称" inputAlign="right"></u--textarea>
				</u-form-item>
			</u--form>

			<u-button type="primary" text="提交" customStyle="margin-top: 0px" @click="submitForm"></u-button>
			<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="resetForm"></u-button>
			<u-action-sheet :show="showSex" :actions="sexActions" title="请选择性别" @close="showSex = false"
				@select="selectSex">
			</u-action-sheet>
			<u-action-sheet :show="showEdu" :actions="eduActions" title="请选择学历" @close="showEdu = false"
				@select="selectEdu">
			</u-action-sheet>
			<u-datetime-picker :show="showEntryDate" mode="date" closeOnClickOverlay @confirm="confirmEntryDate"
				@cancel="cancelEntryDate" @close="cancelEntryDate"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formModel: {
					name: '',
					sex: '',
					education: '',
					entryDate: '',
					idCard: '',
					birthday: '',
					mobile: '',
					emergencyContact: '',
					emergencyPhone: '',
					salaryCard: '',
					email: '',
					bankName: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}],
					education: [{
						required: true,
						message: '请选择学历',
						trigger: 'change'
					}],
					entryDate: [{
						required: true,
						message: '请选择入职时间',
						trigger: 'change'
					}],
					idCard: [{
						required: true,
						message: '请输入身份证号',
						trigger: 'blur'
					}],
					birthday: [{
						required: true,
						message: '生日不能为空',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: '请输入移动电话',
						trigger: 'blur'
					}],
					emergencyContact: [{
						required: true,
						message: '请输入紧急联系人姓名',
						trigger: 'blur'
					}],
					emergencyPhone: [{
						required: true,
						message: '请输入紧急联系电话',
						trigger: 'blur'
					}],
					salaryCard: [{
						required: true,
						message: '请输入工资卡号',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}],
					bankName: [{
						required: true,
						message: '请输入开户行名称',
						trigger: 'blur'
					}]
				},
				showSex: false,
				showEdu: false,
				showEntryDate: false,
				sexActions: [{
						name: '男'
					},
					{
						name: '女'
					}
				],
				eduActions: [{
						name: '专科'
					},
					{
						name: '本科'
					},
					{
						name: '研究生'
					},
					{
						name: '博士生'
					}
				],
			}
		},
		methods: {
			navigateBack() {
				uni.navigateBack()
			},
			selectSex(e) {
				this.formModel.sex = e.name
				this.showSex = false
			},
			selectEdu(e) {
				this.formModel.education = e.name
				this.showEdu = false
			},
			fillBirthdayFromIDCard() {
				const idCard = this.formModel.idCard;
				if (idCard.length === 18) {
					const birthday = `${idCard.substr(6, 4)}-${idCard.substr(10, 2)}-${idCard.substr(12, 2)}`;
					this.formModel.birthday = birthday;
				}
			},
			formatDate(date) {
				const d = new Date(date);
				let month = '' + (d.getMonth() + 1);
				let day = '' + d.getDate();
				const year = d.getFullYear();

				if (month.length < 2)
					month = '0' + month;
				if (day.length < 2)
					day = '0' + day;

				return [year, month, day].join('-');
			},
			confirmEntryDate(e) {
				this.formModel.entryDate = this.formatDate(e.value);
				this.showEntryDate = false;
			},
			cancelEntryDate() {
				this.showEntryDate = false;
			},
			submitForm() {
				this.$refs.formRef.validate().then(res => {
					uni.$u.toast('表单提交成功');
				}).catch(errors => {
					uni.$u.toast('存在未填信息');
				});
			},
			resetForm() {
				this.$refs.formRef.resetFields();
				this.$refs.formRef.clearValidate();
			},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		/* 设置内边距 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
	}

	.u-demo-block__content {
		border-radius: 10px;
		/* 设置圆角 */
		background-color: #ffffff;
		/* 设置背景色 */
		padding: 20px;
		/* 设置内边距 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
	}
</style>